<style>
    .w-120 {
        width: 115px;
    }

    .conentStyle {
        padding: 10px;
        box-sizing: border-box;
    }

    .conentBg {
        padding: 20px;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: #fff;
        min-height: 660px;
    }f

    .borderNone {
        border: none;
    }

    .formBg {
        background-color: #F7F8FA;
        padding: 20px;
    }

    .layui-table-cell {
        height: auto;
    }

    .inventoryProductDetailForm-title {
        width: 100%;
        margin-left: 20px;
    }

    .inventoryProductDetailForm-title .title, .title {
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 19px;
        position: relative;
        padding: 6px 0 19px 0;
    }

    .inventoryProductDetailForm-title .title:after, .title:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% + 6px);
        height: 3px;
        background: #0A8B0A;
    }

</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <form class="layui-form">
                <div class="layui-form lay-header">
                    <div class="toolbar">
                        <div class="layui-form-item lay-query-content">
                            <div class="lay-query-box">
                                <div class="query-lt">
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">物料类别：</label>
                                        <div class="layui-input-inline mr0">
                                            <input name="productTypeId" type="hidden"/>
                                            <div class="layui-input-inline mr0" id="selectProductType"></div>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">物料编号：</label>
                                        <div class="layui-input-inline mr0">
                                            <input name="skuCode" class="layui-input" type="text" placeholder="物料编号"/>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">物料名称：</label>
                                        <div class="layui-input-inline mr0">
                                            <input name="skuName" class="layui-input" type="text" placeholder="物料名称"/>
                                        </div>
                                    </div>

                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn icon-btn color-green" id="inventoryProductSearch" lay-filter="inventoryProductSearch" lay-submit>查询</button>
                                        <button type="reset" class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                    </div>
                                </div>
                                <div class="query-rt"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <table class="layui-table" id="inventoryProductTable" lay-filter="inventoryProductTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="inventoryDetailsProductForm">
    <form lay-filter="inventoryDetailsProductForm" class="layui-form model-form">
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span
                        style="color: red">*</span>产品编号</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="productCode"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span
                        style="color: red">*</span>产品名称</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="productName"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>物料编码</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="skuCode"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>物料名称</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="skuName"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>企业货号</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="enterpriceCode"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span
                        style="color: red">*</span>平台供货价</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="supplyPrice"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span
                        style="color: red">*</span>市场指导价</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="marketPrice"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span
                        style="color: red">*</span>最低活动价</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="activityPrice"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>国标条码</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="barcode"/>
                </div>
            </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>服务商名称</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="name"/>
            </div>
        </div>-->
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;"><span
                        style="color: #ff0000">*</span>录入时间</label>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red" id="createTime"/>
                </div>
            </div>
        </div>
    </form>
</script>

<!-- 库存分布 -->
<script type="text/html" id="inventoryDistributeTab">
    <div class="layui-fluid">
        <table class="layui-table" id="inventoryProductDetailsTable" lay-filter="inventoryProductDetailsTable"></table>
        <br>
        <div class="inventoryProductDetailForm-title">
            <h3 class="title">库存分布</h3>
        </div>
        <div class="line"></div>
        <table class="layui-table" id="inventoryDistributeTable" lay-filter="inventoryDistributeTable"></table>
    </div>

</script>

<!-- 库存明细 -->
<script type="text/html" id="repertoryDetailsTab">
    <div class="layui-fluid">
        <table class="layui-table" id="warehouseDetailsTable" lay-filter="warehouseDetailsTable"></table>
        <br>
        <span>库存明细</span>
        <table class="layui-table" id="repertoryDetailsTable" lay-filter="repertoryDetailsTable"></table>
    </div>

</script>

<!-- 表格操作列 -->
<script type="text/html" id="inventoryProductTableBar">
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="details">详情</a>
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="audit">库存分布</a>
</script>

<!-- 库存分布表格操作列 -->
<script type="text/html" id="inventoryDistributeTableBar">
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="distributeDetails">详情</a>
</script>

<script type="text/html" id="img">
    <div><img src="{{d.productPic}}" style="width:20px;height:20px"></div>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var unitName, xmSelectInstance = null;

        //物料类别
        var useSelect = admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {limit: 99999}, "selectProductType", null, "物料类别", "productTypeId", function (row, instance) {
            //取消选择时 清空物料类别ID
            xmSelectInstance = instance
            if (row.arr.length == 0) {
                $("input[name='productTypeId']").val('');
            }
        });

        // 渲染表格
        var insTb = table.render({
            elem: '#inventoryProductTable',
            url: config.base + 'enterprisecab/order/admin/inventoryProduct/list',
            page: true,
            limit: 5,
            limits: [5, 10, 20, 30, 40, 50, 60, 70, 80],
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: "序号", width: 60}
                // , {
                //     field: 'picture', align: 'center', title: '图片',
                //     templet: '<div><img src="{{ d.productPic}}" style="height: 80px;width: 80px;"></div>'
                // }
                // , {field: 'productName', align: 'center', title: '产品名称'}
                , {field: 'skuCode', align: 'center', title: '物料编码'}
                , {field: 'skuName', align: 'center', title: '物料名称'}
                , {field: 'skuSpec', align: 'center', title: '物料规格'}
                , {field: 'productTypeName', align: 'center', title: '物料类别'}
                , {field: 'inventory', align: 'center', title: '库存'}
                , {field: 'createTime', align: 'center', title: '创建时间', width: 160}
                , {align: 'center', toolbar: '#inventoryProductTableBar', title: '操作', width: 200}
            ]],
            done: function (res, curr, count) {
            }
        });
        form.render('select');

        // 工具条点击事件
        table.on('tool(inventoryProductTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'details') { //详情
                showDetailsModel(data);
            } else if (obj.event === 'audit') { // 审核
                showInventoryDistributeModel(data);
            }
        });

        //监听排序
        table.on('sort(inventoryOutPlanTable)', function (obj) {
            table.reload('inventoryOutPlanTable', {
                initSort: obj,
                where: {
                    sort: obj.field,
                    order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(inventoryProductSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}}, 'data');
            return false;
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            xmSelectInstance?.setValue([]); // 清空下拉树
            insTb.reload({where: admin.resetSearch(data.field), page: {curr: 1}}, 'data');
        });

        // 显示详情弹窗
        function showDetailsModel(data) {
            admin.open({
                type: 1,
                area: '680px',
                offset: ['220px', '700px'],
                title: "商品详情",
                content: $('#inventoryDetailsProductForm').html(),
                success: function () {

                    $("#productName").html(data.productName);
                    $("#productCode").html(data.productCode);
                    $("#skuName").html(data.skuName);
                    $("#skuCode").html(data.skuCode);
                    $("#skuSpecValueNames").html(data.skuSpecValueNames);
                    $("#barcode").html(data.barcode);
                    $("#supplyPrice").html(data.supplyPrice);
                    $("#marketPrice").html(data.marketPrice);
                    $("#activityPrice").html(data.activityPrice);
                    $("#barcode").html(data.barcode);
                    $("#createTime").html(data.createTime);
                    $("#enterpriceCode").html(data.enterpriceCode);
                }
            });
        }

        // 显示库存分布弹窗
        function showInventoryDistributeModel(data) {
            admin.open({
                type: 1,
                area: ['1500px', '800px'],
                offset: ['100px','320px'],
                title: '库存分布',
                content: $('#inventoryDistributeTab').html(),
                success: function () {
                    getInventoryProduct(data)
                    getBoxLabel(data)
                }
            })
        }

        function getInventoryProduct(data) {
            table.render({
                elem: '#inventoryProductDetailsTable',
                //url: config.base + 'enterprisecab/order/admin/inventoryProduct/list?id='+data.id,
                data: [data],
                cellMinWidth: 100,
                cols: [[
                    {
                        field: 'picture',
                        align: 'center',
                        title: '图片',
                        templet: '<div><img src="{{ d.productPic}}" style="height: 50px;"></div>'
                    }
                    , {field: 'skuName', align: 'center', title: '物料名称', width: 150}
                    , {field: 'skuCode', align: 'center', title: '物料编码', width: 150}
                    , {field: 'productCode', align: 'center', title: '产品编码'}
                    , {field: 'productName', align: 'center', title: '产品名称'}
                    , {field: 'productTypeName', align: 'center', title: '物料类别'}
                    , {field: 'inventory', align: 'center', title: '库存'}
                    , {field: 'createTime', align: 'center', title: '添加时间', width: 180}
                ]],
            });
        }

        // 查询库存
        function getBoxLabel(data) {
            unitName = data.unitName
            admin.req('enterprise/order/admin/cabInventoryProduct/getRepertoryBySkuCode', {skuCode: data.skuCode}, function (res) {
                table.render({
                    elem: '#inventoryDistributeTable',
                    data: res.data,
                    cols: [[
                        {type: 'numbers'}
                        , {field: 'warehouseCode', align: 'center', title: '仓库编号', width: 150}
                        , {field: 'warehouseName', align: 'center', title: '仓库名称'}
                        , {
                            field: 'warehouseFeatureType', align: 'center', title: '仓库性质', width: 150,
                            templet: function (d) {
                                if (d.warehouseFeatureType == 1) {
                                    return "自建";
                                } else if (d.warehouseFeatureType == 2) {
                                    return "租赁";
                                } else if (d.warehouseFeatureType == 3) {
                                    return "借用";
                                } else if (d.warehouseFeatureType == 4) {
                                    return "临时";
                                }

                            }
                        }
                        , {field: 'addr', align: 'center', title: '所在地区', width: 150}
                        , {field: 'quantity', align: 'center', title: '最小单位库存数'}
                        , {field: 'unitName', align: 'center', title: '最小单位库存单位'}
                        , {align: 'center', toolbar: '#inventoryDistributeTableBar', title: '操作', width: 200}
                    ]],
                });
            }, 'GET');
        }

        table.on('tool(inventoryDistributeTable)', function (obj) {
            let data = obj.data;
            if (obj.event === 'distributeDetails') { //详情
                showRepertoryDetailsModel(data);
            }
        });

        // 库存明细
        function showRepertoryDetailsModel(data) {
            admin.open({
                type: 1,
                area: ['1400px', '700px'],
                offset: '85px',
                title: '库存明细',
                content: $('#repertoryDetailsTab').html(),
                success: function () {
                    warehouseDetailsDataTab(data);
                    admin.req('enterprisecab/warehouse/admin/boxLabel/getBoxLabBySkuCodeAndWarehouseIdList?skuCode='
                        + data.skuCode + '&warehouseId=' + data.warehouseId + '&sourceType=' + data.sourceType, {}, function (res) {
                        table.render({
                            elem: '#repertoryDetailsTable',
                            data: res.data,
                            cols: [[
                                {type: 'numbers'}
                                , {field: 'boxPalletCode', align: 'center', title: '料箱编号', width: 150}
                                , {field: 'labelQuantity', align: 'center', title: '库存数量'}
                                , {field: 'packName', align: 'center', title: '库存单位', width: 150}
                                , {field: 'amountQuantity', align: 'center', title: '最小单位库存数', width: 160}
                                , {field: 'unitName', align: 'center', title: '最小单位库存单位'}
                                , {field: 'areaName', align: 'center', title: '所在库区'}
                                , {field: 'shelfCode', align: 'center', title: '所在货架编号'}
                                , {field: 'layerNum', align: 'center', title: '所在所在层'}
                                , {field: 'shelfSpaceCode', align: 'center', title: '所在货位编号'}
                            ]],
                        });
                    }, 'GET');
                }
            })
        }

        function warehouseDetailsDataTab(data) {
            admin.req('enterprisecab/warehouse/admin/boxLabel/getBoxLabBySkuAndWarehouseId?skuCode=' + data.skuCode + '&warehouseId=' + data.warehouseId, {}, function (res) {
                if (res.code == 200) {
                    console.log(res)
                    table.render({
                        elem: '#warehouseDetailsTable',
                        data: [data],
                        cols: [[
                            {type: 'numbers'}
                            , {field: 'warehouseCode', align: 'center', title: '仓库编号', width: 150}
                            , {field: 'warehouseName', align: 'center', title: '仓库名称', width: 150}
                            , {field: 'addr', align: 'center', title: '所在地区', width: 200}
                            , {
                                field: 'boxNum', align: 'center', title: '涉及货位', width: 100, templet: function (d) {
                                    return res.data.boxNum;
                                }
                            }
                            , {
                                field: 'spaceNum',
                                align: 'center',
                                title: '涉及料箱',
                                width: 100,
                                templet: function (d) {
                                    return res.data.spaceNum;
                                }
                            }
                        ]],
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'GET');

        }

        // 导出excel
        $('#inventoryOutPlanBtnExport').click(function () {
            var checkRows = table.checkStatus('inventoryOutPlanTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });
    });
</script>